<template>
  <el-dialog :title="isEdit ? '编辑部门' : '新增部门'" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <el-form-item label="上级部门">
          <el-select v-model="formData.parentId" style="width: 100%;" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门编码" prop="deptCode">
          <el-input v-model="formData.deptCode" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="formData.deptName" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="responsibleMan">
          <el-input v-model="formData.responsibleMan" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="responsiblePhone">
          <el-input v-model="formData.responsiblePhone" maxlength="13" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from "@/mixins/dialogEdit"
  import { department } from "@/api/api"
  import { eleValidator } from "@/utils/tools"

  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        options: [

        ],
        ary: [],
        formRules: {
          deptCode: [
            { required: true, message: "请输入部门编码", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "部门编码不能为空" },
                { rule: "isNumberLetter", msg: "部门编码只能输入数字和字母" },
                {
                  rule: "isRepeat",
                  msg: {
                    value: "部门编码重复",
                    url: "/Department/Exists",
                    key: "deptCode",
                  },
                },
              ]),
              trigger: "blur",
            },
          ],
          deptName: [
            { required: true, message: "请输入部门名称", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isEmpty", msg: "部门名称不能为空" },
                {
                  rule: "isRepeat",
                  msg: {
                    value: "部门名称重复",
                    url: "/Department/Exists",
                    key: "deptName",
                  },
                },
              ]),
              trigger: "blur",
            },
          ],
          responsibleMan: [
            { required: true, message: "请输入部门负责人", trigger: "blur" },
          ],
          responsiblePhone: [
            { required: true, message: "请输入部门名称", trigger: "blur" },
            {
              validator: eleValidator([
                { rule: "isPhone", msg: "请输入正确的手机号或电话号码" },
              ]),
              trigger: "blur",
            },
          ],
        },
        apiKey: {
          search: "/Department/",
          add: "/Department",
          put: "/Department/",
        },
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) {
          return
        }
        this.$refs.RefForm.clearValidate()
      },
    },
    methods: {
      resetFormData() {
        this.formData = {
          parentId: 0,
          deptCode: "",
          deptName: "",
          responsibleMan: "",
          responsiblePhone: "",
        }
      },
      async getDepartmentList() {
        let obj = { pageIndex: 1, pageSize: 1e8 }
        const result = await department("post", obj, false)
        if (result.code === 200) {
          this.options = [
            { label: '无', value: 0 }
          ]
          result.data.items.forEach((item) => {
            this.options.push({
              label: item.deptName,
              value: item.id,
            })
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
